<template>
    <view class="container">
        <view class="container-title">
 <el-date-picker
  type="date"
         placeholder="选择预约时间"
		 v-model="value"
		 value-format="YYYY-MM-DD"
		 @change="getDoctors"
		 style="width: 100%; height: 80rpx;"
		 
 />
        </view>
        <view class="container-body"  >
			<view class="card" v-for="(item,index) in list">
				<view class="card-1">
					<cover-image class="img1" :src=item.image></cover-image>
				</view>
				<view class="card-2">
					<p style="margin-top: 20rpx;">{{item.name}}</p>
					<div class="text">
						<p>{{item.introduce}}</p>
						
					</div>
				</view>
				<view class="card-3">
					<p style="width: 100%; text-align: end; color: blue;margin-bottom: 30rpx;" @click="goArrange"></p>
					<view class="card-3-app">
						<view style="display: flex;flex-direction: column; width: 100%; height: auto;" >
						<view class="order" >
							<view style="width: 40%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;">
								<button>添加一条预约信息</button>
							</view>
							<view style="width: 30%; display: flex; justify-content:center; flex-direction:column;">
							</view>
							<view style="width: 30%; display: flex; justify-content:center; flex-direction:column;">
								<el-button type="primary" >添加一天的预约信息</el-button>
							</view>
						</view>
						<p style="width: 100%; text-align: center;">余号：{{arrangeItem.num}}</p>
						</view>
					</view>
				</view>
			</view>
        </view>
 
    </view>
</template>

<script lang="ts" setup>
  
    import axiosInstance from '@/Config/axiosConfig'
    import globalStore from '@/store/GlobalStore';
    import Emessage from '@/Utils/Message';
	import {onMounted,watch} from 'vue'
	import { h, ref, shallowRef } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import DoctorApp from '../../entity/DoctorApp';
	const value=ref("");
	const list=ref<DoctorApp>();
	const deptid=ref(0);
	const getDoctors=async()=>{
		try{
		const response=await axiosInstance.post('/patient/getDoctorArrange',{
			deptid:deptid.value,
			date:value.value
		})
		if(response.data.code==200)list.value=response.data.data;
		else if(response.data.code==201)Emessage(response.data.message,"warning")
		else Emessage("网络错误","error")
		}catch(e){
			Emessage("网络错误","error")
		}
	}
	onLoad((option)=>{
		deptid.value=option.deptid
		var d=new Date();
		value.value=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()
		getDoctors();
	})
	//预约
	const appoint=async(doctorid,item)=>{
		var userid=globalStore.patientid;
		console.log(item)
		item.num-=1;
		const response=axiosInstance.post('/patient/reserve',{
			patientId:userid,
			scheduleId:item.id
		})
		if(response.data.code==200){
			Emessage("预约成功","success");
			item.num-=1;
		}else{
			Emessage("预约失败","error");
		}
		
		
	}
	//判断日期是否已经小于当前的日期了
	const isDate=(date:string)=>{
		var temp=new Date();
		var y=temp.getFullYear()
		var m=temp.getMonth()+1;
		var d=temp.getDate();
		var s=date.split('-');
		if(parseInt(s[0])>y||(parseInt(s[0])<=y&&parseInt(s[1])>m)||(parseInt(s[0])<=y&&parseInt(s[1])<=m&&parseInt(s[2])>d)){
			return false
		}
		
		console.log(year+"-"+month+"-"+day);
	}
	//判断时间是否已经小于当前时间了
	const isTime=(time:string)=>{
		var temp=new Date();
		var h=temp.getHours();
		var m=temp.getMinutes();
		var s=time.split(':');
		if(parseInt(s[0])>h||(parseInt(s[0])<=h&&parseInt(s[1])>m)){
			return false
		}
		return true;
	}

</script>

<style>
   .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
	
    }

   .container-title {
        width: 100%;
        height: 70rpx;
        display: flex;
        flex-direction: row;
        justify-items: center;

    }

   .container-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10rpx;
		align-items: center;
		overflow-y: hidden;
		
    }
	.container-body::-webkit-scrollbar {
	    width: 0; /* 水平滚动条宽度设为0 */
	}

   .card {
        border-radius: 30rpx;
        border: 2px solid gainsboro;
		margin-top: 20rpx ;
        width: 90%;
        height: 250rpx;
        display: flex;
        flex-direction: row;
        margin-bottom: 10rpx;
    }
	.card-1{
		width: 20%;
		display: flex;
		flex-direction: column;
	}
	.card-2{
		
		width: 30%;
		display: flex;
		flex-direction: column;
		margin-right: 15rpx;

	}
.text {
    padding: 10rpx;
    width: 95%;
    height: 90%;
    margin: auto;
    border: 1px solid gainsboro;
    word-wrap: break-word; /* 长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器的替代方案 */
	overflow: hidden;
    word-break: break-word; /* 长单词与非单词内容都能换行 */
}

	.card-3{
		width: 40%;
		display: flex;
		flex-direction: column;
	}
	.card-3-app{
		display: flex;
		border-radius: 10rpx;
		flex-direction: column;
		width: 100%;
		height: 80%;
		overflow-x: hidden;
	}
	.card-3-app::-webkit-scrollbar {
	    width: 0; /* 水平滚动条宽度设为0 */
	}
	.order{
       border-radius: 10rpx;
        border: 2px solid gainsboro;
        margin-left: 20rpx;
		margin-top: 20rpx ;
        width: 90%;
        height: 100rpx;
        display: flex;
        flex-direction: row;
	
	}
   .img1 {
        border-radius: 120rpx;
        width: 120rpx;
        height: 120rpx;
		
		margin-top: 20rpx;
		margin-left: 10rpx;
    }

</style>